<template>
  <div class="main">
    <div class="top">
      <div class="topic1">
        <div class="pay_select">
          <el-container class="method_container">
            <el-main style="" v-for="(scheme, index) in scheme" :key="index">
              <div class="method">{{scheme.scheme_name}}</div>
              <div class="pricemodal">
                <div style="padding-top: 30px">
                  <span style="font-size: 40px; font-weight: bold">{{scheme.cost}}</span
                  ><span style="opacity: 40%"> 元</span>
                </div>
                <div style="font-size: 20px; opacity: 40%; margin-top: 10px">
                  {{scheme.cost_per_mouth}}元/月
                </div>
                <div style="margin-top: 50px">---------------</div>
                <div style="font-size: 24px; opacity: 70%; margin-top: 10px">
                  {{scheme.desc}}
                </div>
              </div>
            </el-main>
            <!-- <el-main style="">
              <div class="method">包季</div>
              <div class="pricemodal">
                <div style="padding-top: 30px">
                  <span style="font-size: 40px; font-weight: bold">24</span
                  ><span style="opacity: 40%"> 元</span>
                </div>
                <div style="font-size: 20px; opacity: 40%; margin-top: 10px">
                  7.6元/月
                </div>
                <div style="margin-top: 50px">---------------</div>
                <div style="font-size: 24px; opacity: 70%; margin-top: 10px">
                  连续包月
                </div>
              </div>
            </el-main>
            <el-main style="">
              <div class="method">半年</div>
              <div class="pricemodal">
                <div style="padding-top: 30px">
                  <span style="font-size: 40px; font-weight: bold">7.6</span
                  ><span style="opacity: 40%"> 元</span>
                </div>
                <div style="font-size: 20px; opacity: 40%; margin-top: 10px">
                  7.6元/月
                </div>
                <div style="margin-top: 50px">---------------</div>
                <div style="font-size: 24px; opacity: 70%; margin-top: 10px">
                  连续包月
                </div>
              </div>
            </el-main> -->
          </el-container>
        </div>
      </div>
    </div>
    <div class="topic2">
      <div class="pay_container">
        <div class="paytitle">支付方式</div>
        <div class="pay_method">
          <el-container class="method_container">
            <el-main style="margin-right: -80px">
              <div class="method">微信</div>
              <img src="../../assets/img/paycode.png" alt="" class="paycode" />
            </el-main>
            <el-main style="margin-left: -80px">
              <div class="method">支付宝</div>
              <img src="../../assets/img/paycode.png" alt="" class="paycode" />
            </el-main>
          </el-container>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "vip",
  data() {
    return {
      scheme: [
        {
          scheme_name: "包月",
          cost: 7.6,
          cost_per_mouth: 7.6,
          desc: "连续包月",
        },
        {
          scheme_name: "包季",
          cost: 24,
          cost_per_mouth: 8,
          desc: "3个月",
        },
        {
          scheme_name: "半年",
          cost: 45,
          cost_per_mouth: 7.5,
          desc: "6个月",
        },
      ],
    };
  },
};
</script>
<style scoped>
.pricemodal {
  width: 200px;
  height: 300px;
  background-color: white;
  margin: 0 auto;
  border-radius: 5%;
}
.top {
  width: 100%;
  background-color: #9fdfe9;
  height: 400px;
  margin-top: 60px;
}
.method_container {
  height: 100%;
}
.paycode {
  height: 120px;
  width: 120px;
  margin-top: 20px;
}
.method {
  font-size: 24px;
  opacity: 40%;
}
.pay_method {
  text-align: center;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pay_select {
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.paytitle {
  font-size: 24px;
  opacity: 40%;
}
.pay_container {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}
.topic2 {
  width: 100%;
  /* background-color: #89c7d4; */
  height: 300px;
  margin-bottom: 60px;
}
.main {
  width: 100%;
}
.vipdesc {
  font-size: 20px;
  font-weight: bold;
  opacity: 40%;
}
.topic1 {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
  /* margin-top: 60px; */
  text-align: center;
  /* background-color: #89c7d4; */
}
.container_main {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.newmusiccontent {
  /* text-align: left; */
  /* display: flex; */
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  margin-left: -230px;
}
.vip-fill {
  height: 80px;
  width: 80px;
}
</style>>
